<template>
    <div class="ShopCar">
	 <!-- 头部 -->
     <div class="Login-header">
        <div>
          <router-link to="/Index">
            <img class="zjt" :src="puctuer.zjt" alt="" />
          </router-link>
          
        </div>
        <div>{{msg[0]}}</div>
        <!-- 循环头部的圆圈 -->
        <div>
          <ul v-for="item in list" :key="item.id">
            <li>{{ item }}</li>
          </ul>
        </div>
      </div>
		<div class="ShopCar-info">
			<div>
				<img src="../assets/images/安全.png">
				<p style="margin: 0px;">你正在安全购物环境中，请放心购物</p>
			</div>
		</div>
		<div class="ShopCar-items">
			<ul>
				<li v-for="(item,index) in productList" :key="item.id">
					<div class="ShopCar-items-up">
						<p>{{item.proinfo}}</p>
					</div>
					<div class="ShopCar-items-down">
						<ul>
							<li class="items-down-img">
								<input type="checkBox" v-bind:checked="item.isSelect"
									@click="item.isSelect=!item.isSelect" />
							</li>
							<li><img :src="item.img"></li>
							<li>
								<span style="margin-top: 10px;">{{item.proName}}</span>
								<p style="margin-top: 5px;">￥{{item.proPrice}}元</p>
								<div class="item-manage">
									<ul class="item-add">
										<li><a href="javascript:void(0)" @click="item.proNum>0?item.proNum--:''">-</a>
										</li>
										<li>{{item.proNum}}</li>
										<li><a href="javascript:void(0)" @click="item.proNum++">+</a></li>
									</ul>
									<a href="javascript:void(0)" @click="deletePro(index)">
										<img src="../assets/images/find/删除.png">
									</a>
								</div>
							</li>
						</ul>
					</div>
				</li>				
			</ul>
		</div>
        <!-- 结算 -->
		<div class="ShopCar-f">
			<div class="ShopCar-foot">
				<div class="ShopCar-foot-left">
					<ul style="margin: 0 auto;">
						<li>
							<label for="allcheck">
								<input type="checkBox" id="allcheck" @click="selectProduct(isSelectAll)" v-bind:checked="isSelectAll" />全选
							</label>
						</li>
						<li style="margin-top: 0px;width: 190px;">
							<ul>
								<li>
									<p>合计：￥{{getTotal.totalPrice}}元</p>
								</li>
								<li>总额：￥{{getTotal.totalPrice}}元 返现:{{getTotal.price}}元</li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="ShopCar-foot-right">
					<p class="jiesuan" @click="jiesuan">去结算：{{getTotal.state}}元</p>
				</div>
			</div>
		</div>
		<Allfooter />

	</div>
</template>

<script>
import Allfooter from '@/components/Allfooter.vue'
export default {
    name: 'Shopcar',
    components:{
        Allfooter
    },
    data() {
        return {
            productList: [
					{
						proinfo: '您享受满79元免运费服务',
						img: './images/男款宽松长裤.jpg',
						proName: '男款裤子美式宽松休闲',
						proNum: 1,
						proPrice: '58.00',
					},
					{
						proinfo: '您享受满79元免运费服务',
						img: './images/户外棒球帽.jpg',
						proName: '户外运动棒球帽男女通用。',
						proNum: 1,
						proPrice: '71.10',
					},
					{
						proinfo: '您享受满79元免运费服务',
						img: './images/小鱼干.jpg',
						proName: '劲仔小鱼 鱼干鱼仔 零食 香辣味',
						proNum: 1,
						proPrice: '9.90',
					},
				],
                msg:['购物车'],
                puctuer:{
                        zjt:require('@/assets/images/左箭头.png'),
                         },
                 list:['','','']
        };
    },
	methods: {
			selectProduct: function(_isSelect) {
				//遍历productList，全部取反
				for (var i = 0, len = this.productList.length; i < len; i++) {
					this.productList[i].isSelect = !_isSelect;
				}
			},
			deletePro: function(index) {
				alert("你正在删除" + this.productList[index].proName);
				this.productList.splice(index, 1);
			},
			//删除已经选中(isSelect=true)的产品
			deleteProduct: function() {
				this.productList = this.productList.filter(function(item) {
					return !item.isSelect
				})
			},
			jiesuan(){
				this.$router.push({
					path:'/jiesuan'
				})
			}
		},
		computed: {
			//检测是否全选
			isSelectAll: function() {
				//如果productList中每一条数据的isSelect都为true，返回true，否则返回false;
				return this.productList.every(function(val) {
					return val.isSelect
				});
			},
			getTotal: function() {
                let prci = 0;
                let statement =0
				var prolist = this.productList.filter(function(val) {
						return val.isSelect
					}),
					totalPri = 0;
				for (var i = 0, len = prolist.length; i < len; i++) {
                    // 计算总价
					totalPri += prolist[i].proPrice * prolist[i].proNum;
                    // 返现总价的百分之二并且取整
                    prci =parseInt(totalPri*0.1) ;
                    // 求算结算金额
                    statement = totalPri - prci
                    
				}
				return {
					totalNum: prolist.length,
					totalPrice: totalPri,
                    price:prci,
                    state:statement,
				}
			},
            
		},
		mounted: function() {
			var _this = this;
			//为productList添加select（是否选中）字段，初始值为true
			this.productList.map(function(item) {
				_this.$set(item, 'isSelect', true);
			})
		},
	
};
</script>

<style scoped>
.Login-header {
    width: 100%;
    height: 44px;
    background: linear-gradient(white, rgb(239, 239, 239));
    border-bottom: 2px solid lightgray;
    display: flex;
  }
  .Login-header > div:nth-of-type(1) {
    width: 15%;
    height: 100%;
  }
  .Login-header > div:nth-of-type(2) {
    width: 65%;
    height: 100%;
    text-align: center;
    line-height: 44px;
  }
  .Login-header > div:nth-of-type(3) {
    width:10%;
    height: 100%;
  }
  .zjt {
    width: 25px;
    height: 25px;
    margin-top: 9.5px;
    margin-left: 5px;
  }
  .Login-header ul li {
    float: left;
    list-style: none;
    width: 4px;
    height: 4px;
    margin-left: 3px;
    border: 2px solid black;
    border-radius: 50%;
    margin-top: 5px;
  }
.ShopCar{
	width: 400px;
    margin: 0 auto;
	background-color: whitesmoke;
}
.ShopCar li{
    list-style: none;
}
.ShopCar a{
    text-decoration: none;
}
.ShopCar-head {
	width: 100%;
	height: 45px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: linear-gradient(white, rgb(239, 239, 239));
	border-bottom: 2px solid lightgray;
}

.ShopCar-head img {
	width: 25px;
	height: 25px;
	margin-top: 10px;
	margin-left: 5px;
}

.ShopCar-head img:last-child {
	margin-right: 10px;
}

.ShopCar-head p {
	line-height: 45px;
}
.ShopCar-info{
	height: 40px;
	line-height: 40px;
	background-color: white;	
	text-align: center;
}
.ShopCar-info>div{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.ShopCar-info img{
	width: 20px;
	height: 20px;
	margin-top: 10px;
}
.ShopCar-items{
	height: 1000px;
}
.ShopCar-items>ul>li{
	background-color: white;
	margin-bottom: 10px;
}
.ShopCar-items-up{
	height: 40px;
	text-align: left;
	border-top: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
	text-indent: 20px;
	color: gray;
	font-size: 0.8em;
}
.ShopCar-items-down{
	height: 150px;
	border-bottom: 2px solid lightgray;
	font-size: 0.9em;
}
.ShopCar-items-down>ul{
	height: 105px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.items-down-img{
	width: 16px;
	height: 16px;
	margin-top: 10px;
}
.ShopCar-items-down>ul>li:first-child{
	width: 16px;
	height: 16px;
}
.ShopCar-items-down>ul>li:nth-of-type(2) img{
	width: 80px;
	height: 80px;
	margin-top: 10px;
}
.ShopCar-items-down>ul>li:last-child{
	width: 180px;
	text-align: left;
}
.ShopCar-items-down>ul>li:last-child span{
	font-size: 0.9em;
}
.item-manage{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 5px;
}
.item-manage img{
	width: 25px;
	height: 25px;	
	cursor: pointer;
}
.item-add{
	width: 96px;
	height: 25px;
	line-height: 25px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border: 2px solid lightgray;
	border-radius: 5px;
}

.item-add a{
	color: gray;
}

.item-add>li{
	width: 33%;
	text-align: center;
}
.item-add>li:first-child{
	border-right: 2px solid lightgray;	
	cursor: pointer;
}
.item-add>li:last-child{
	border-left: 2px solid lightgray;	
	cursor: pointer;
}
.ShopCar-f{
	margin-top: 66px
}
.ShopCar-foot{
	width: 400px;
	height: 60px;
	position: fixed;
	bottom: 48px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;	
}
.ShopCar-foot-left{
	width: 65%;
	background-color: dimgray;
	color: white;
	height: 60px;
	font-size: 0.8em;
}

.ShopCar-foot-left>ul{	
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.ShopCar-foot-left>ul>li:first-child{
	display: flex;
	flex-direction: row;
	line-height: 65px;
}
.ShopCar-foot-left>ul>li:first-child input{
	vertical-align:middle;
}
.ShopCar-foot-left>ul>li:last-child{
	margin-top: 8px;
	width: 150px;
	font-size: 0.8em;
}
.ShopCar-foot-right{
	width: 35%;
	background-color: red;
	color: white;
	line-height: 50px;
	font-size: 0.5em;
}
.jiesuan{
    margin: 0 auto;
    line-height: 60px;
    text-align: center;
}
</style>